<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
				<script type="text/javascript">
			function $$(id){
				return document.getElementById(id);
			}
			window.onload = function(){
				var cnv = $$("canvas");
				var cxt = cnv.getContext("2d");
				createPolygon(50,50,5,40,cxt);
				
				function createPolygon(dx, dy, n, size, cxt){
					cxt.beginPath(); 
					for (var i= 0;i < n; i++) {
						var x=size * Math.cos(i * 2 * Math.PI / n)  + dx;
						var y=size * Math.sin(i * 2 * Math.PI / n) + dy;
						cxt.lineTo(x, y);
					
					}
					cxt.fillStyle = "red";
					cxt.fill();
					cxt.closePath();
				}
				cnv.addEventListener("mousedown",downfun);
			}
		</script>
	</head>
	<body>
		<canvas id="canvas" width="400" height="300" style="border: 1px solid silver;"></canvas>
	</body>
</html>

				